<template>
  <section class="ProjectCard__container">
    <div class="__body">
      <h1>
        <span v-if="+item.status" class="flag">新</span>
        <span class="name" @click="click">{{ item.name }}</span>
      </h1>
      <p>{{ item.remark ? item.remark : "无" }}</p>
      <!-- {{ item }} -->
    </div>
    <div v-if="!noAction" class="__footer">
      <div class="_footeritem"><slot :item="item"></slot></div>
    </div>

    <div class="stamp">
      <!-- <div>{{ item.project_module_name }}</div> -->
      <!-- <quick-stamp v-if="+item.level_id == 1" label="黑名单" type="danger" />
      <quick-stamp v-if="+item.level_id == 2" label="比较差" type="warning" />
      <quick-stamp v-if="+item.level_id == 3" label="普通" type="info" />
      <quick-stamp v-if="+item.level_id == 4" label="良好" type="primary" />
      <quick-stamp v-if="+item.level_id == 5" label="重要" type="success" /> -->
    </div>
  </section>
</template>

<script>
import GenderIcon from "../Common/GenderIcon.vue";
export default {
  components: { GenderIcon },
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    noAction: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    click() {
      // const { href } = this.$router.resolve({
      //   path: `/projectmoduledetail/${this.item.id}`,
      // });
      // window.open(href, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.ProjectCard__container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 240px;
  box-sizing: border-box;
  box-shadow: 0 0 12px #ebebeb;
  border-radius: 5px;
  overflow: hidden;
  transition: 0.5s;

  .__body {
    display: flex;
    flex-direction: column;

    padding: 10px;
    line-height: 1.6;

    h1 {
      font-size: 2.2rem;
      font-weight: bold;
      display: flex;
      height: 30px;

      .name {
        margin-right: 10px;

        &:hover {
          color: #409eff;
          cursor: pointer;
        }
      }

      .flag {
        position: absolute;
        left: -10px;
        top: -1px;
        // border: 2px solid coral;
        background: coral;
        transform: rotate(-45deg);
        // border-radius: 50%;
        color: white;
        padding: 2px 10px;
        line-height: 1;
        font-size: 1.2rem;
        height: auto;
      }
    }

    p {
      color: #666;
      margin-top: 10px;

      span {
        font-size: 1.2rem;
        // border: 1px solid #409eff;
        border-radius: 5px;
        margin: 0 5px 0 0;
        padding: 0 5px;
        // color: #409eff;
        background: #ebebeb;
      }
    }
  }

  .__footer {
    // display: none;
    // display: block;
    height: 30px;
    // transition: 1s;
    background: #fcfcfc;
    display: flex;
    justify-content: flex-end;
    ._footeritem {
      margin-right: 10px;
    }
  }

  &:hover {
    // > .__footer {
    //   // display: flex;
    //   height: 30px;
    //   background: #f4f4f4;
    // }
  }

  .stamp {
    position: absolute;
    right: 5%;
    top: -5%;
  }
}
</style>